---
title: Inicio rápido
description: Guía para instalar Fluid DnD.
---

import { Tabs, TabItem, Code } from "@astrojs/starlight/components";

### Instalación

Instala **Fluid DnD** usando tu manejador de paquetes favorito:

```bash
# con npm:
npm i fluid-dnd

# con yarn:
yarn add fluid-dnd

# con pnpm:
pnpm i fluid-dnd
```

### Uso

#### Uso global

Configura el **composable** (`useDragAndDrop`) usando [provide/inject](https://vuejs.org/guide/components/provide-inject) para que toda la aplicación lo pueda usar

export const globalUsage = `
import { createApp } from "vue";
import App from './App.vue';
import { useDragAndDrop } from "fluid-dnd/vue";

const app = createApp(App);

app.provide('useDragAndDrop', useDragAndDrop);

app.mount('#app');`;

<Code code={globalUsage} lang="js" />

#### Uso local

Importa el **composable** (`useDragAndDrop`):

export const compositionApiCode = `
<script>
  import { useDragAndDrop } from "fluid-dnd/vue";
</script>`;

<Code code={compositionApiCode} lang="vue" />
